<template>
  <div class="my-container">
    <!-- 已登录：用户信息 -->
    <div class="bgpicture">
      <img
        src="https://img0.baidu.com/it/u=1020757406,2710278676&fm=26&fmt=auto&gp=0.jpg"
        alt=""
      >
    </div>
    <div
      class="user-info-wrap"
      v-if="$store.state.user"
    >
      <div class="base-info-wrap">
        <div class="avatar-title-wrap">
          <van-image
            class="avatar"
            round
            fit="cover"
            :src="user.baseUrl+user.photo"
          />
          <div class="title">{{ user.name }}</div>
        </div>

        <van-button
          size="nomral"
          @click="$router.push('/user/profile')"
          class="editProfile"
          color="#3a3a44"
        >编辑资料</van-button>
      </div>
      <div class="introduce">{{user.introduce}}</div>
      <van-divider style="width=100%" />

      <div class="userInfo">
        <van-tag
          text-color="#929398"
          color="#242730"
          size="medium"
          type="primary"
          v-show="user.location"
        >{{user.location}}</van-tag>
        <van-tag
          style="margin-left =5px"
          text-color="#929398"
          color="#242730"
          size="medium"
          type="primary"
          v-show="user.gender===0||user.gender==1"
        >{{user.gender?"女":"男"}}</van-tag>
        <van-tag
          style="margin-left =5px"
          text-color="#929398"
          color="#242730"
          size="medium"
          type="primary"
          v-show="user.birthday"
        >{{user.birthday}}</van-tag>
      </div>
      <div
        class="count_wrap"
        @click="$router.push({path:`/user/${user.userid}/follow?tab=0`})"
      >
        <span class="count"> {{ follow }} </span>
        <span class="count_text">关注</span>
      </div>
      <div
        class="count_wrap"
        @click="$router.push({path:`/user/${user.userid}/follow?tab=1`})"
      >
        <span class="count">{{fans}} </span>
        <span class="count_text">粉丝</span>
      </div>
      <div class="count_wrap">
        <span class="count">{{ like_count }}</span>
        <span class="count_text">获赞</span>
      </div>
    </div>
    <!-- /已登录：用户信息 -->

    <!-- 未登录 -->
    <div
      class="not-login"
      v-else
    >
      <div
        class="login"
        @click="
          $router.push({
            name: 'login',
            query: {
              redirect: '/my'
            }
          })
        "
      >
        <img
          src="./img/login.png"
          alt=""
        >
      </div>
      <div class="text">点击登录</div>
    </div>
    <!-- /未登录 -->

    <!-- /其它 -->
    <div
      class="userabout"
      @click="isShowUserAbout = true"
    >
      <van-icon
        name="bars"
        color="#ffffff"
        size="30"
      />
    </div>
    <van-popup
      v-model="isShowUserAbout"
      position="right"
      style="height:100%;width:30% "
    >
      <van-cell-group v-if="$store.state.user">
        <van-cell
          style="text-align: center;"
          title="退出登录"
          clickable
          @click="onLogout"
        />
      </van-cell-group>
    </van-popup>

    <!-- 视频 -->
    <van-tabs
      v-model="active"
      color="#face15"
      aria-selected="#fff"
      line-width='33.3%'
      background="#191923"
      title-active-color='#fff'
    >
      <van-tab :title="`作品 ${user.myvideos.length}`">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad(0)"
        >
          <div class="videoWrap">
            <div
              class="videoPreview"
              v-for="(video,index) in myvideos"
              :key="video._id"
              @click="$router.push({
                name:'userVideo',
                params:{
                  userid:user.userid,
                  videoTpye:0,
                  videoid:video._id,
                  index:index
                }
              })"
              @touchstart='onDeleteMessage(video._id)'
              @touchend='clearTimeOut'
            >
              <div class="loveNum">
                <van-icon
                  name="like-o"
                  size="18px"
                /> {{video.likeNum}}
              </div>
              <img :src="video.baseUrl+video.poster">
              <div id="output"></div>
            </div>
          </div>
        </van-list>

      </van-tab>
      <van-tab :title="`喜欢 ${user.likevideos.length}`">
        <van-list
          v-model="loading2"
          :finished="finished2"
          finished-text="没有更多了"
          @load="onLoad(1)"
        >
          <div class="videoWrap">
            <div
              class="videoPreview"
              v-for="(video,index) in likevideo"
              :key="video._id"
              @click="$router.push({
                name:'userVideo',
                params:{
                  userid:user.userid,
                  videoTpye:1,
                  videoid:video._id,
                 index:index

                }
              })"
            >
              <div class="loveNum">
                <van-icon
                  name="like-o"
                  size="18px"
                /> {{video.likeNum}}
              </div>
              <img :src="video.baseUrl+video.poster">
              <div id="output"></div>
            </div>
          </div>
        </van-list>
      </van-tab>

    </van-tabs>
  </div>
</template>

<script>
import { getUserInfo, getUserSelfVideo, removeUserSelfVideo } from '@/api/user'
import globalBus from '@/utils/global-bus'

export default {
  name: 'MyPage',
  data () {
    return {
      user: {
        baseUrl: '',
        myvideos: [],
        likevideos: []
      }, // 用户信息对象
      isShowUserAbout: false,
      fans: 0,
      follow: 0,
      like_count: 0,
      myvideos: [],
      likevideo: [],
      active: 0,
      finished: true,
      loading: false,
      finished2: true,
      loading2: false,
      userVideoPage: 0,
      likeVideoPage: 0
    }
  },
  created () {
    if (this.$store.state.user) {
      this.loadUser()
    }
    globalBus.$on('user-update', () => {
      this.loadUser()
    })
  },
  activated () {
    if (this.$store.state.user) {
      this.loadUser()
    }
  },
  deactivated () {
    this.userVideoPage = 0
    this.likeVideoPage = 0
    this.myvideos = []
    this.likevideo = []
  },
  methods: {
    onLogout () {
      // Dialog 组件既可以在模板中使用
      // 也可以通过 JavaScript 来调用
      // 模板中使用 van-dialog

      // JavaScript 调用：this.$dialog
      this.$dialog
        .confirm({
          title: '退户确认',
          message: '退出后一些功能不可用',
          color: '#000'
        })
        .then(() => {
          // 确认执行这里
          // 清除容器和本地存储的数据
          this.$store.commit('setUser', null)
          this.isShowUserAbout = false
          location.reload()
        })
        .catch(() => {
          // 取消执行这里
        })
    },

    async loadUser () {
      const res = await getUserInfo(this.$store.state.user.userid)
      const user = res.data.data
      this.user = user
      this.fans = user.fans.length
      this.follow = user.follow.length
      const res2 = await getUserSelfVideo(user.userid, 0, ++this.userVideoPage)
      const myvideos = res2.data.data
      this.myvideos.push(...myvideos)
      let likeCount = 0
      const likevideo = await getUserSelfVideo(this.user.userid, 1, ++this.likeVideoPage)
      this.likevideo.push(...likevideo.data.data)
      myvideos.forEach(v => {
        likeCount = v.likeNum + likeCount
      })
      this.finished = false
      this.finished2 = false
      this.like_count = likeCount
    },

    async loadingMyVideos () {
      const res2 = await getUserSelfVideo(this.user.userid, 0, ++this.userVideoPage)
      const myvideos = res2.data.data
      this.loading = false
      if (myvideos.length === 0) {
        this.finished = true
      } else {
        this.myvideos.push(...myvideos)
      }
    },
    async loadingLikeVideos () {
      const likevideo = await getUserSelfVideo(this.user.userid, 1, ++this.likeVideoPage)
      const addlikevideo = likevideo.data.data
      this.loading2 = false
      if (addlikevideo.length === 0) {
        this.finished2 = true
      } else {
        this.likevideo.push(...addlikevideo)
      }
    },
    onLoad (value) {
      if (value) {
        this.loadingLikeVideos()
      } else {
        this.loadingMyVideos()
      }
    },
    onDeleteMessage (videoid) {
      this.isLongPress = setTimeout(() => {
        this.$dialog
          .confirm({
            title: '是否删除视频',
            color: '#000'
          })
          .then(async () => {
            // 确认执行这里
            // 清除容器和本地存储的数据
            try {
              await removeUserSelfVideo(this.$store.state.user.userid, { videoid })
              this.userVideoPage = 0
              this.likeVideoPage = 0
              this.myvideos = []
              this.likevideo = []
              this.loadUser()
            } catch (error) {
              this.$store.commit('setUser', null)
              return this.$router.push('/login')
            }
          })
          .catch(() => {
            // 取消执行这里
          })
      }, 1000)
    },
    clearTimeOut () {
      clearTimeout(this.isLongPress)
    }
  }
}

</script>

<style lang="less" scoped>
.bgpicture {
  width: 100%;
  height: 140px;
  img {
    width: 100%;
    height: 100%;
  }
}

.my-container {
  .user-info-wrap {
    box-sizing: border-box;
    background-size: cover;
    padding: 40px 20px;
    font-size: 15px;
    .base-info-wrap {
      margin-top: -55px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .avatar-title-wrap {
        display: flex;
        align-items: center;
        .avatar {
          margin-right: 15px;
          width: 66px;
          height: 66px;
          padding: 2px;
          background: #fff;
        }
      }
    }
    .count_wrap {
      font-size: 18px;
      margin-top: 10px;
      margin-left: 8px;
      float: left;
      .count_text {
        color: #8b8c92;
      }
    }
  }

  .not-login {
    background: #161824;
    height: 182px;
    box-sizing: border-box;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .login {
      background-size: cover;
      width: 66px;
      height: 66px;
      margin-bottom: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      font-size: 14px;
    }
  }

  > .van-cell-group {
    margin-top: 10px;
  }
  .introduce {
    margin-top: 5px;
  }
  .userabout {
    position: fixed;
    top: 0;
    right: 0;
  }
  .videoWrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    .videoPreview {
      width: 33.3%;
      height: 150px;
      position: relative;
      .loveNum {
        font-size: 18px;
        position: absolute;
        z-index: 100;
        bottom: 3px;
        right: 3px;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .van-popup {
    background: #191923;
  }
  .editProfile {
    margin-top: 20px;
  }
}

.van-dialog {
  color: #000;
}
</style>
